import Table from '@/components/rewardTable';
import { Row, Col, Image } from 'antd';
import { Button } from 'antd';

import { useTranslation } from 'react-i18next';

import Ced from '@/assets/icons/ced.png';
import Slice from '@/assets/icons/Slice23.png';
import './nft.scss';
import { Divider } from 'antd';

export default () => {
    const { t } = useTranslation();
    const data = [
        {
            address: '地址',
            total: 22,
            recAddress: '接受地址',
            time: 'time',
            status: '成功'
        },
        {
            address: '地址',
            total: 22,
            recAddress: '接受地址',
            time: 'time',
            status: '成功'
        },
        {
            address: '地址',
            total: 22,
            recAddress: '接受地址',
            time: 'time',
            status: '成功'
        },
        {
            address: '地址',
            total: 22,
            recAddress: '接受地址',
            time: 'time',
            status: '成功'
        }
    ];
    const columns = [
        {
            title: t('Deposit Address'),
            dataIndex: 'address',
            key: 'name'
        },
        {
            title: t('Total'),
            dataIndex: 'total',
            key: 'name'
        },
        {
            title: t('Receiving Address'),
            dataIndex: 'recAddress',
            key: 'name'
        },
        {
            title: t('System Confirmation Time'),
            dataIndex: 'time',
            key: 'name'
        },
        {
            title: t('Status'),
            dataIndex: 'status',
            key: 'name',
            render(row) {
                return <Button>{row.status}</Button>;
            }
        }
    ];

    return (
        <Row>
            <Col flex={1} sm={24} md={24} lg={24} xl={12} className="side">
                <p className="nft-records" style={{ margin: '20px' }}>
                    {t('NFT Staking')}
                </p>
                <Row>
                    <Col span={24} className="box ">
                        <Row align="middle" justify="space-around" wrap={false}>
                            <Col
                                span={8}
                                style={{
                                    position: 'relative',
                                    height: '304px',
                                    display: 'flex',
                                    justifyContent: 'center',
                                    alignItems: 'center'
                                }}>
                                <img src={Ced} className='CedImg' />
                                <img src={Slice} className='SliceImg' />
                            </Col>
                            <Col span={8}>
                                <div className="btnbox">
                                    <Button className="btn">{t('Stake NFT')}</Button>
                                    <Button className="btn">{t('Unstaking')}</Button>
                                </div>
                            </Col>
                        </Row>
                    </Col>
                    <Col span={24} className="box reward-bottom">
                        <Row justify="space-around" align="middle" style={{ height: '100%' }}>
                            <Col span={8} className="reward-left" flex={1}>
                                <h3 className="currentReward">{t("Today's Rewards")}</h3>
                                <div className='shi'>
                                    <h3 className="bot">BOT</h3>
                                    <h3 className="total">123</h3>
                                </div>
                            </Col>
                            <Col span={8} className="reward-right btnbox" flex={1}>
                                <h3 className="title_">{t('Claimable')}：123</h3>
                                <Button style={{ flex: '1 1' }}>{t('Withdraw')}</Button>
                            </Col>
                        </Row>
                    </Col>
                </Row>
            </Col>
            <Col flex={1} sm={24} md={24} lg={24} xl={12} className="side" style={{ padding: '0' }}>
                <p className="nft-records" style={{ margin: '20px' }}>
                    {t('NFT Staking Records')}
                </p>

                <div style={{ borderRadius: '20px' }}>
                    <Table columns={columns} dataSource={data} />
                </div>
            </Col>
        </Row>
    );
};
